<template>
  <div id="app">
    <!-- <button v-scroll-to="'#element'">
      Scroll to #element
    </button> -->
    <button @click="scrollTo">
      测试滑动程序化
    </button>
    <h1 id="element">Hi. I'm element</h1>
  </div>
</template>

<script>
// import Scroller from 'vue-scrollto'
import { scroller } from 'vue-scrollto/src/scrollTo'

export default {
  methods: {
    scrollTo () {
      console.log('scroller!!!!')
      const firstScrollTo = scroller()
      firstScrollTo('#element')
      // var options = {
      //   container: '#app',
      //   easing: 'ease-in',
      //   offset: -60,
      //   cancelable: true,
      //   onStart: function (element) {
      //     // scrolling started
      //   },
      //   onDone: function (element) {
      //     // scrolling is done
      //   },
      //   onCancel: function () {
      //     // scrolling has been interrupted
      //   },
      //   x: false,
      //   y: true
      // }
      // Scroller.scrollTo('#element', 300, options)
      // var cancelScroll = Scroller.scrollTo('#element', 300, options)

      // or alternatively inside your components you can use
      // cancelScroll = this.$scrollTo(element, duration, options)

      // to cancel scrolling you can call the returned function
      // cancelScroll()
    }
  }
}
</script>

<style lang="scss">
h1, button {
  margin-bottom: 100px;
}
</style>
